<template>
  <view class="cyber-container">
    <!-- 系统启动动画 -->
    <view class="boot-sequence" v-if="showBootSequence">
      <view class="boot-content">
        <view class="boot-logo">AGRITECH OS</view>
        <view class="boot-progress">
          <view class="progress-bar" :style="{ width: bootProgress + '%' }"></view>
        </view>
        <view class="boot-text">
          <text v-for="(line, index) in bootLines" :key="index" v-show="bootLineVisible[index]">{{ line }}</text>
        </view>
      </view>
    </view>
    
    <!-- 粒子背景 -->
    <view class="particles-container" ref="particlesContainer"></view>
    
    <!-- 网格背景 -->
    <view class="cyber-bg">
      <view class="grid-overlay"></view>
      <view class="noise-overlay"></view>
      <view class="circuit-lines">
        <view v-for="i in 12" :key="i" class="circuit-line" :style="{ top: `${i * 8}%`, animationDelay: `${i * 0.2}s` }"></view>
        <view v-for="i in 12" :key="`v-${i}`" class="circuit-line vertical" :style="{ left: `${i * 8}%`, animationDelay: `${i * 0.3}s` }"></view>
      </view>
      <view class="glitch-overlay"></view>
    </view>
    
    <!-- 系统状态栏 -->
    <view class="system-status-bar">
      <view class="status-item">
        <view class="status-dot active"></view>
        <text>SYSTEM ONLINE</text>
      </view>
      <view class="status-item date-time">
        <text>{{ currentDate }}</text>
        <text class="time">{{ currentTime }}</text>
      </view>
      <view class="status-item">
        <text>AGRITECH v2.1.5</text>
        <view class="status-dot active"></view>
      </view>
    </view>
    
    <!-- 顶部标题 -->
    <view class="cyber-header">
      <view class="cyber-logo">
        <view class="logo-hexagon">
          <view class="logo-inner"></view>
        </view>
        <view class="logo-text">
          <text class="cyber-text">AGRI</text>
          <text class="cyber-text-accent">TECH</text>
        </view>
      </view>
      <view class="cyber-title">
        <text class="title-text">智慧农业助手</text>
        <text class="subtitle-text terminal-text" ref="terminalText"></text>
      </view>
    </view>
    
    <!-- 主内容区 -->
    <view class="cyber-content">
      <!-- 全息登录面板 -->
      <view class="cyber-panel" :class="{ 'panel-glitch': triggerPanelGlitch }">
        <view class="hologram-effect"></view>
        <view class="panel-header">
          <view class="corner top-left"></view>
          <view class="corner top-right"></view>
          <view class="panel-title">
            <text class="title-icon">[</text>
            <text>系统访问验证</text>
            <text class="title-icon">]</text>
          </view>
          <view class="panel-controls">
            <view class="control-dot"></view>
            <view class="control-dot"></view>
            <view class="control-dot"></view>
          </view>
        </view>
        
        <!-- 登录方式选择器 -->
        <view class="login-tabs">
          <view 
            v-for="(tab, index) in loginTabs" 
            :key="index"
            class="tab-item"
            :class="{ active: currentTab === index }"
            @click="switchTab(index)"
          >
            <view class="tab-icon">
              <text class="icon-text">{{ tab.iconText }}</text>
            </view>
            <text>{{ tab.name }}</text>
            <view class="tab-highlight" v-if="currentTab === index"></view>
          </view>
        </view>
        
        <!-- 账号密码登录 -->
        <view v-if="currentTab === 0" class="login-form">
          <view class="form-header">
            <text class="form-title">// 身份验证</text>
            <view class="security-level">
              <text>安全级别:</text>
              <view class="level-indicator">
                <view class="level-dot active"></view>
                <view class="level-dot active"></view>
                <view class="level-dot"></view>
              </view>
            </view>
          </view>
          
          <view class="cyber-input-group" :class="{ 'input-focus': usernameFocus, 'input-error': usernameError, 'input-valid': accountForm.username && !usernameError }">
            <view class="input-label">用户ID</view>
            <view class="input-icon">
              <text class="icon-symbol">⦿</text>
            </view>
            <input 
              type="text" 
              v-model="accountForm.username" 
              placeholder="输入授权ID" 
              placeholder-style="color: #666;"
              @focus="usernameFocus = true"
              @blur="validateUsername"
            />
            <view class="input-line"></view>
            <view class="input-status">
              <text v-if="accountForm.username && !usernameError" class="status-symbol success">✓</text>
              <text v-if="usernameError" class="status-symbol error">✗</text>
            </view>
            <text v-if="usernameError" class="error-message">用户ID不能为空</text>
          </view>
          
          <view class="cyber-input-group" :class="{ 'input-focus': passwordFocus, 'input-error': passwordError, 'input-valid': accountForm.password && !passwordError }">
            <view class="input-label">访问密钥</view>
            <view class="input-icon">
              <text class="icon-symbol">⚿</text>
            </view>
            <input 
              :type="showPassword ? 'text' : 'password'" 
              v-model="accountForm.password" 
              placeholder="输入访问密钥" 
              placeholder-style="color: #666;"
              @focus="passwordFocus = true"
              @blur="validatePassword"
            />
            <view class="input-toggle" @click="togglePasswordVisibility">
              <text class="icon-symbol">{{ showPassword ? '👁' : '👁‍🗨' }}</text>
            </view>
            <view class="input-line"></view>
            <view class="input-status">
              <text v-if="accountForm.password && !passwordError" class="status-symbol success">✓</text>
              <text v-if="passwordError" class="status-symbol error">✗</text>
            </view>
            <text v-if="passwordError" class="error-message">访问密钥不能少于6位</text>
          </view>
          
          <view class="form-options">
            <label class="remember-option">
              <view class="cyber-checkbox" @click="toggleRememberMe">
                <view class="checkbox-inner" v-if="rememberMe"></view>
              </view>
              <text>记住凭证</text>
            </label>
            <text class="forgot-link" @click="navigateTo('/pages/forgot-password/index')">重置密钥</text>
          </view>
          
          <button 
            class="cyber-button" 
            :class="{ 'button-loading': isLoading }" 
            @click="handleLogin"
            :disabled="isLoading"
          >
            <view class="button-bg"></view>
            <view class="button-glitch"></view>
            <text v-if="!isLoading">接入系统</text>
            <view v-else class="loading-spinner"></view>
            <view class="button-border"></view>
          </button>
        </view>
        
        <!-- 验证码登录 -->
        <view v-if="currentTab === 1" class="login-form">
          <view class="form-header">
            <text class="form-title">// 验证码认证</text>
            <view class="security-level">
              <text>安全级别:</text>
              <view class="level-indicator">
                <view class="level-dot active"></view>
                <view class="level-dot active"></view>
                <view class="level-dot active"></view>
              </view>
            </view>
          </view>
          
          <view class="cyber-input-group" :class="{ 'input-focus': phoneFocus, 'input-error': phoneError, 'input-valid': phoneForm.phone && !phoneError }">
            <view class="input-label">通讯号码</view>
            <view class="input-icon">
              <text class="icon-symbol">☎</text>
            </view>
            <input 
              type="number" 
              v-model="phoneForm.phone" 
              placeholder="输入通讯号码" 
              placeholder-style="color: #666;"
              maxlength="11"
              @focus="phoneFocus = true"
              @blur="validatePhone"
            />
            <view class="input-line"></view>
            <view class="input-status">
              <text v-if="phoneForm.phone && !phoneError" class="status-symbol success">✓</text>
              <text v-if="phoneError" class="status-symbol error">✗</text>
            </view>
            <text v-if="phoneError" class="error-message">请输入有效的通讯号码</text>
          </view>
          
          <view class="cyber-input-group" :class="{ 'input-focus': codeFocus, 'input-error': codeError, 'input-valid': phoneForm.code && !codeError }">
            <view class="input-label">验证码</view>
            <view class="input-icon">
              <text class="icon-symbol">⌘</text>
            </view>
            <input 
              type="number" 
              v-model="phoneForm.code" 
              placeholder="输入验证码" 
              placeholder-style="color: #666;"
              maxlength="6"
              @focus="codeFocus = true"
              @blur="validateCode"
            />
            <view 
              class="code-button" 
              :class="{ 'disabled': countdownActive || phoneError }"
              @click="sendVerificationCode"
            >
              <text>{{ countdownText }}</text>
              <view class="button-border"></view>
            </view>
            <view class="input-line"></view>
            <view class="input-status">
              <text v-if="phoneForm.code && !codeError" class="status-symbol success">✓</text>
              <text v-if="codeError" class="status-symbol error">✗</text>
            </view>
            <text v-if="codeError" class="error-message">请输入6位验证码</text>
          </view>
          
          <button 
            class="cyber-button" 
            :class="{ 'button-loading': isLoading }" 
            @click="handlePhoneLogin"
            :disabled="isLoading"
          >
            <view class="button-bg"></view>
            <view class="button-glitch"></view>
            <text v-if="!isLoading">验证接入</text>
            <view v-else class="loading-spinner"></view>
            <view class="button-border"></view>
          </button>
        </view>
        
        <!-- 扫码登录 -->
        <view v-if="currentTab === 2" class="qrcode-container">
          <view class="qrcode-frame">
            <view class="qrcode-corner tl"></view>
            <view class="qrcode-corner tr"></view>
            <view class="qrcode-corner bl"></view>
            <view class="qrcode-corner br"></view>
            <view class="qrcode-scanner-container">
              <view class="qrcode-scanner"></view>
              <view class="scan-line"></view>
            </view>
            <view class="qrcode-image">
              <view class="qr-grid">
                <view v-for="i in 25" :key="i" class="qr-cell" :class="{ 'qr-filled': qrPattern.includes(i) }"></view>
              </view>
            </view>
            <view class="qrcode-overlay" v-if="qrcodeExpired">
              <text>二维码已过期</text>
              <button class="refresh-button" @click="refreshQRCode">
                <text>刷新</text>
                <view class="button-border"></view>
              </button>
            </view>
          </view>
          <text class="qrcode-tip">使用智慧农业App扫描二维码接入系统</text>
          <view class="qrcode-status">
            <view class="status-dot"></view>
            <text>有效期 {{ qrcodeCountdown }}s</text>
          </view>
        </view>
        
        <view class="panel-footer">
          <view class="corner bottom-left"></view>
          <view class="corner bottom-right"></view>
          
          <!-- 第三方登录 -->
          <view class="social-login">
            <view class="divider">
              <view class="divider-line"></view>
              <text>其他接入方式</text>
              <view class="divider-line"></view>
            </view>
            
            <view class="social-icons">
              <view 
                v-for="(platform, index) in socialPlatforms" 
                :key="index"
                class="social-icon"
                @click="handleSocialLogin(platform.id)"
              >
                <view class="icon-bg" :class="platform.id">
                  <text class="platform-icon">{{ platform.symbol }}</text>
                  <view class="icon-glow"></view>
                </view>
                <text>{{ platform.name }}</text>
              </view>
            </view>
          </view>
        </view>
      </view>
      
      <!-- 注册入口 -->
      <view class="register-entry">
        <text>没有账号?</text>
        <text class="register-link" @click="navigateTo('/pages/register/index')">申请系统访问权限</text>
      </view>
      
      <!-- 底部信息 -->
      <view class="cyber-footer">
        <view class="footer-decoration">
          <view class="deco-line"></view>
          <view class="deco-circle"></view>
          <view class="deco-line"></view>
        </view>
        <text class="footer-text">登录即表示您同意</text>
        <text class="footer-link" @click="navigateTo('/pages/terms/index')">《用户协议》</text>
        <text class="footer-text">和</text>
        <text class="footer-link" @click="navigateTo('/pages/privacy/index')">《隐私政策》</text>
        <view class="footer-version">
          <text>AGRITECH OS v2.1.5</text>
          <text class="blink">_</text>
        </view>
      </view>
    </view>
    
    <!-- 提示消息 -->
    <view class="toast-container" v-if="showToast">
      <view class="toast-message" :class="{ 'toast-success': toastType === 'success', 'toast-error': toastType === 'error' }">
        <text class="toast-icon">{{ toastType === 'success' ? '✓' : '✗' }}</text>
        <text>{{ toastMessage }}</text>
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref, reactive, onMounted, onUnmounted, computed } from 'vue';

// ===== 状态管理 =====
// 启动序列
const showBootSequence = ref(true);
const bootProgress = ref(0);
const bootLines = [
  '> 初始化系统...',
  '> 加载核心模块...',
  '> 连接农业数据中心...',
  '> 校准传感器网络...',
  '> 加载用户界面...',
  '> 系统就绪'
];
const bootLineVisible = ref(bootLines.map(() => false));

// 时间日期
const currentTime = ref('00:00:00');
const currentDate = ref('2077-01-01');

// 登录表单
const accountForm = reactive({
  username: '',
  password: ''
});

const phoneForm = reactive({
  phone: '',
  code: ''
});

// 表单焦点状态
const usernameFocus = ref(false);
const passwordFocus = ref(false);
const phoneFocus = ref(false);
const codeFocus = ref(false);

// 表单错误状态
const usernameError = ref(false);
const passwordError = ref(false);
const phoneError = ref(false);
const codeError = ref(false);

// 登录状态
const isLoading = ref(false);
const rememberMe = ref(false);
const showPassword = ref(false);

// 验证码状态
const countdownActive = ref(false);
const countdown = ref(60);
const countdownText = computed(() => {
  return countdownActive.value ? `${countdown.value}s` : '获取验证码';
});

// 二维码状态
const qrcodeExpired = ref(false);
const qrcodeCountdown = ref(120);
let qrcodeTimer = null;
const qrPattern = [1, 2, 3, 5, 6, 7, 9, 11, 13, 15, 17, 19, 21, 23, 25]; // 简单的QR码图案

// 标签页状态
const currentTab = ref(0);
const loginTabs = [
  { name: '账号登录', iconText: '⌨' },
  { name: '验证码登录', iconText: '✉' },
  { name: '扫码登录', iconText: '⎔' }
];

// 社交平台
const socialPlatforms = [
  { id: 'wechat', name: '微信', symbol: 'W' },
  { id: 'alipay', name: '支付宝', symbol: 'A' },
  { id: 'weibo', name: '微博', symbol: 'B' }
];

// 视觉效果
const triggerPanelGlitch = ref(false);

// Toast消息
const showToast = ref(false);
const toastMessage = ref('');
const toastType = ref('success');
let toastTimer = null;

// ===== 生命周期钩子 =====
onMounted(() => {
  // 启动序列动画
  runBootSequence();
  
  // 更新时间
  updateDateTime();
  setInterval(updateDateTime, 1000);
  
  // 加载保存的用户名密码
  loadSavedCredentials();
  
  // 启动二维码倒计时
  startQRCodeCountdown();
  
  // 添加背景动画
  startGlitchEffect();
  initParticles();
  
  // 终端文字效果
  typeTerminalText();
  
  // 定期触发面板故障效果
  setInterval(() => {
    triggerPanelGlitch.value = true;
    setTimeout(() => {
      triggerPanelGlitch.value = false;
    }, 200);
  }, 5000);
});

onUnmounted(() => {
  // 清除定时器
  if (qrcodeTimer) clearInterval(qrcodeTimer);
  if (toastTimer) clearTimeout(toastTimer);
});

// ===== 方法 =====
// 启动序列
const runBootSequence = () => {
  let progress = 0;
  const progressInterval = setInterval(() => {
    progress += 1;
    bootProgress.value = progress;
    
    // 显示启动文本
    const lineIndex = Math.floor((progress / 100) * bootLines.length);
    if (lineIndex < bootLines.length) {
      bootLineVisible.value[lineIndex] = true;
    }
    
    if (progress >= 100) {
      clearInterval(progressInterval);
      setTimeout(() => {
        showBootSequence.value = false;
      }, 500);
    }
  }, 30);
};

// 更新时间日期
const updateDateTime = () => {
  const now = new Date();
  currentTime.value = now.toLocaleTimeString();
  currentDate.value = now.toLocaleDateString('zh-CN', { year: 'numeric', month: '2-digit', day: '2-digit' }).replace(/\//g, '-');
};

// 终端文字效果
const typeTerminalText = () => {
  const text = "// 未来科技 · 智能农业 · 数据驱动 //";
  let index = 0;
  const terminalElement = document.querySelector('.terminal-text');
  
  const typeInterval = setInterval(() => {
    if (!terminalElement) return;
    
    if (index < text.length) {
      terminalElement.textContent += text.charAt(index);
      index++;
    } else {
      clearInterval(typeInterval);
    }
  }, 50);
};

// 初始化粒子
const initParticles = () => {
  const container = document.querySelector('.particles-container');
  if (!container) return;
  
  for (let i = 0; i < 50; i++) {
    const particle = document.createElement('div');
    particle.classList.add('particle');
    
    // 随机位置和大小
    const size = Math.random() * 3 + 1;
    particle.style.width = `${size}px`;
    particle.style.height = `${size}px`;
    particle.style.left = `${Math.random() * 100}%`;
    particle.style.top = `${Math.random() * 100}%`;
    
    // 随机动画延迟和持续时间
    const animDuration = 15 + Math.random() * 20;
    const animDelay = Math.random() * 10;
    particle.style.animation = `float ${animDuration}s ${animDelay}s infinite linear`;
    
    // 随机颜色
    const colors = ['#0ff', '#0f0', '#f0f'];
    const color = colors[Math.floor(Math.random() * colors.length)];
    particle.style.backgroundColor = color;
    particle.style.boxShadow = `0 0 ${size * 2}px ${color}`;
    
    container.appendChild(particle);
  }
};

// 表单验证
const validateUsername = () => {
  usernameFocus.value = false;
  usernameError.value = !accountForm.username;
  return !usernameError.value;
};

const validatePassword = () => {
  passwordFocus.value = false;
  passwordError.value = accountForm.password.length < 6;
  return !passwordError.value;
};

const validatePhone = () => {
  phoneFocus.value = false;
  const phoneRegex = /^1[3-9]\d{9}$/;
  phoneError.value = !phoneRegex.test(phoneForm.phone);
  return !phoneError.value;
};

const validateCode = () => {
  codeFocus.value = false;
  codeError.value = phoneForm.code.length !== 6;
  return !codeError.value;
};

// 切换密码可见性
const togglePasswordVisibility = () => {
  showPassword.value = !showPassword.value;
};

// 切换记住我
const toggleRememberMe = () => {
  rememberMe.value = !rememberMe.value;
};

// 切换标签页
const switchTab = (index) => {
  currentTab.value = index;
};

// 显示Toast消息
const showToastMessage = (message, type = 'success') => {
  toastMessage.value = message;
  toastType.value = type;
  showToast.value = true;
  
  if (toastTimer) clearTimeout(toastTimer);
  
  toastTimer = setTimeout(() => {
    showToast.value = false;
  }, 3000);
};

// 加载保存的凭据
const loadSavedCredentials = () => {
  try {
    const savedCredentials = localStorage.getItem('savedCredentials');
    if (savedCredentials) {
      const credentials = JSON.parse(savedCredentials);
      accountForm.username = credentials.username || '';
      accountForm.password = credentials.password || '';
      rememberMe.value = true;
    }
  } catch (e) {
    console.error('Failed to load saved credentials', e);
  }
};

// 保存凭据
const saveCredentials = () => {
  if (rememberMe.value) {
    try {
      localStorage.setItem('savedCredentials', JSON.stringify({
        username: accountForm.username,
        password: accountForm.password
      }));
    } catch (e) {
      console.error('Failed to save credentials', e);
    }
  } else {
    try {
      localStorage.removeItem('savedCredentials');
    } catch (e) {
      console.error('Failed to remove credentials', e);
    }
  }
};

// 发送验证码
const sendVerificationCode = async () => {
  if (countdownActive.value) return;
  
  if (!validatePhone()) return;
  
  countdownActive.value = true;
  countdown.value = 60;
  
  // 启动倒计时
  const timer = setInterval(() => {
    countdown.value--;
    if (countdown.value <= 0) {
      clearInterval(timer);
      countdownActive.value = false;
    }
  }, 1000);
  
  try {
    // 模拟API调用
    await new Promise(resolve => setTimeout(resolve, 1000));
    
    showToastMessage('验证码已发送');
  } catch (error) {
    showToastMessage('发送失败，请重试', 'error');
    clearInterval(timer);
    countdownActive.value = false;
  }
};

// 二维码倒计时
const startQRCodeCountdown = () => {
  qrcodeCountdown.value = 120;
  qrcodeExpired.value = false;
  
  if (qrcodeTimer) clearInterval(qrcodeTimer);
  
  qrcodeTimer = setInterval(() => {
    qrcodeCountdown.value--;
    if (qrcodeCountdown.value <= 0) {
      clearInterval(qrcodeTimer);
      qrcodeExpired.value = true;
    }
  }, 1000);
};

// 刷新二维码
const refreshQRCode = () => {
  startQRCodeCountdown();
  showToastMessage('二维码已刷新');
};

// 账号密码登录
const handleLogin = async () => {
  // 验证表单
  if (!validateUsername() || !validatePassword()) return;
  
  // 显示加载状态
  isLoading.value = true;
  
  try {
    // 保存凭据
    saveCredentials();
    
    // 模拟API调用
    await new Promise(resolve => setTimeout(resolve, 1500));
    
    // 模拟登录成功
    const userInfo = {
      id: 'user_' + Date.now(),
      username: accountForm.username,
      token: 'token_' + Date.now()
    };
    
    // 保存用户信息到本地存储
    localStorage.setItem('userInfo', JSON.stringify(userInfo));
    localStorage.setItem('token', userInfo.token);
    
    // 显示成功提示
    showToastMessage('登录成功');
    
    // 跳转到首页
    setTimeout(() => {
      navigateTo('/pages/index/index', true);
    }, 1000);
  } catch (error) {
    showToastMessage(error.message || '登录失败，请重试', 'error');
  } finally {
    isLoading.value = false;
  }
};

// 手机验证码登录
const handlePhoneLogin = async () => {
  // 验证表单
  if (!validatePhone() || !validateCode()) return;
  
  // 显示加载状态
  isLoading.value = true;
  
  try {
    // 模拟API调用
    await new Promise(resolve => setTimeout(resolve, 1500));
    
    // 模拟登录成功
    const userInfo = {
      id: 'user_' + Date.now(),
      phone: phoneForm.phone,
      token: 'token_' + Date.now()
    };
    
    // 保存用户信息到本地存储
    localStorage.setItem('userInfo', JSON.stringify(userInfo));
    localStorage.setItem('token', userInfo.token);
    
    // 显示成功提示
    showToastMessage('登录成功');
    
    // 跳转到首页
    setTimeout(() => {
      navigateTo('/pages/index/index', true);
    }, 1000);
  } catch (error) {
    showToastMessage(error.message || '登录失败，请重试', 'error');
  } finally {
    isLoading.value = false;
  }
};

// 社交账号登录
const handleSocialLogin = (platform) => {
  showToastMessage(`正在使用${platform}登录`);
  
  // 这里实现第三方登录逻辑
  setTimeout(() => {
    showToastMessage('第三方登录暂未实现', 'error');
  }, 1500);
};

// 页面导航
const navigateTo = (url, isTab = false) => {
  // 模拟页面跳转
  console.log(`跳转到: ${url}, 是否Tab页: ${isTab}`);
  
  // 在实际应用中，这里会使用框架的导航方法
  if (isTab) {
    // 模拟切换到Tab页
    window.location.hash = url;
  } else {
    // 模拟普通页面跳转
    window.location.hash = url;
  }
};

// 背景故障效果
const startGlitchEffect = () => {
  const glitchOverlay = document.querySelector('.glitch-overlay');
  if (!glitchOverlay) return;
  
  setInterval(() => {
    const randomX = Math.random() * 100;
    const randomY = Math.random() * 100;
    const randomWidth = 10 + Math.random() * 30;
    const randomHeight = 1 + Math.random() * 5;
    
    const glitchElement = document.createElement('div');
    glitchElement.classList.add('glitch-element');
    glitchElement.style.left = `${randomX}%`;
    glitchElement.style.top = `${randomY}%`;
    glitchElement.style.width = `${randomWidth}px`;
    glitchElement.style.height = `${randomHeight}px`;
    
    glitchOverlay.appendChild(glitchElement);
    
    setTimeout(() => {
      glitchElement.remove();
    }, 200);
  }, 2000);
};
</script>

<style>
/* ===== 基础样式 ===== */
.cyber-container {
  min-height: 100vh;
  background-color: #050510;
  color: #fff;
  font-family: 'Courier New', monospace;
  display: flex;
  flex-direction: column;
  position: relative;
  overflow: hidden;
}

/* ===== 启动序列 ===== */
.boot-sequence {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #000;
  z-index: 1000;
  display: flex;
  justify-content: center;
  align-items: center;
}

.boot-content {
  width: 80%;
  max-width: 600rpx;
}

.boot-logo {
  font-size: 48rpx;
  color: #0ff;
  text-align: center;
  margin-bottom: 40rpx;
  font-weight: bold;
  letter-spacing: 2px;
  text-shadow: 0 0 10px rgba(0, 255, 255, 0.7);
}

.boot-progress {
  height: 6rpx;
  background-color: #333;
  margin-bottom: 40rpx;
  position: relative;
}

.progress-bar {
  height: 100%;
  background-color: #0ff;
  box-shadow: 0 0 10px rgba(0, 255, 255, 0.7);
  transition: width 0.1s linear;
}

.boot-text {
  font-family: monospace;
  font-size: 24rpx;
  color: #0ff;
}

.boot-text text {
  display: block;
  margin-bottom: 10rpx;
}

/* ===== 粒子效果 ===== */
.particles-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
}

.particle {
  position: absolute;
  border-radius: 50%;
  opacity: 0.6;
}

@keyframes float {
  0% {
    transform: translateY(0) translateX(0);
  }
  25% {
    transform: translateY(-100px) translateX(50px);
  }
  50% {
    transform: translateY(-50px) translateX(100px);
  }
  75% {
    transform: translateY(50px) translateX(50px);
  }
  100% {
    transform: translateY(0) translateX(0);
  }
}

/* ===== 背景效果 ===== */
.cyber-bg {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
}

.grid-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: 
    linear-gradient(rgba(0, 255, 255, 0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0, 255, 255, 0.03) 1px, transparent 1px);
  background-size: 30px 30px;
  background-position: center center;
  perspective: 1000px;
  transform-style: preserve-3d;
  animation: grid-animation 20s infinite linear;
}

.noise-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url('');
  opacity: 0.03;
  animation: noise-animation 0.5s steps(10) infinite;
}

@keyframes noise-animation {
  0% { transform: translate(0, 0); }
  10% { transform: translate(-1%, -1%); }
  20% { transform: translate(1%, 1%); }
  30% { transform: translate(-1%, 1%); }
  40% { transform: translate(1%, -1%); }
  50% { transform: translate(-1%, -1%); }
  60% { transform: translate(1%, 1%); }
  70% { transform: translate(-1%, 1%); }
  80% { transform: translate(1%, -1%); }
  90% { transform: translate(-1%, -1%); }
  100% { transform: translate(0, 0); }
}

@keyframes grid-animation {
  0% {
    background-position: 0 0;
  }
  100% {
    background-position: 30px 30px;
  }
}

.circuit-lines {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.circuit-line {
  position: absolute;
  height: 1px;
  width: 100%;
  background: linear-gradient(90deg, transparent, rgba(0, 255, 255, 0.1), transparent);
  animation: circuit-animation 8s infinite linear;
}

.circuit-line.vertical {
  height: 100%;
  width: 1px;
  background: linear-gradient(180deg, transparent, rgba(0, 255, 255, 0.1), transparent);
}

@keyframes circuit-animation {
  0% {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

.glitch-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 5;
}

.glitch-element {
  position: absolute;
  background-color: rgba(0, 255, 255, 0.5);
  box-shadow: 0 0 10px rgba(0, 255, 255, 0.8);
  z-index: 10;
}

/* ===== 系统状态栏 ===== */
.system-status-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10rpx 30rpx;
  background-color: rgba(0, 0, 0, 0.5);
  border-bottom: 1px solid rgba(0, 255, 255, 0.3);
  font-size: 22rpx;
  color: #0ff;
  position: relative;
  z-index: 2;
}

.status-item {
  display: flex;
  align-items: center;
}

.status-dot {
  width: 8rpx;
  height: 8rpx;
  border-radius: 50%;
  background-color: #666;
  margin: 0 10rpx;
}

.status-dot.active {
  background-color: #0f0;
  box-shadow: 0 0 5px rgba(0, 255, 0, 0.8);
  animation: blink 2s infinite;
}

.date-time {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.time {
  color: #f0f;
  font-weight: bold;
}

/* ===== 顶部标题 ===== */
.cyber-header {
  padding: 40rpx 40rpx;
  display: flex;
  align-items: center;
  position: relative;
  z-index: 1;
}

.cyber-logo {
  position: relative;
  display: flex;
  align-items: center;
  margin-right: 30rpx;
}

.logo-hexagon {
  width: 80rpx;
  height: 80rpx;
  position: relative;
  background-color: rgba(0, 255, 255, 0.1);
  clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
  margin-right: 20rpx;
  animation: logo-pulse 2s infinite;
}

.logo-inner {
  position: absolute;
  top: 5rpx;
  left: 5rpx;
  right: 5rpx;
  bottom: 5rpx;
  background-color: rgba(255, 0, 255, 0.2);
  clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
}

@keyframes logo-pulse {
  0%, 100% {
    box-shadow: 0 0 10px rgba(0, 255, 255, 0.5);
  }
  50% {
    box-shadow: 0 0 20px rgba(0, 255, 255, 0.8);
  }
}

.logo-text {
  display: flex;
}

.cyber-text {
  font-size: 36rpx;
  font-weight: bold;
  color: #0ff;
  text-shadow: 0 0 10px rgba(0, 255, 255, 0.7);
}

.cyber-text-accent {
  font-size: 36rpx;
  font-weight: bold;
  color: #f0f;
  text-shadow: 0 0 10px rgba(255, 0, 255, 0.7);
}

.cyber-title {
  display: flex;
  flex-direction: column;
}

.title-text {
  font-size: 32rpx;
  font-weight: bold;
  color: #fff;
  margin-bottom: 5rpx;
}

.subtitle-text {
  font-size: 24rpx;
  color: #0ff;
  height: 24rpx;
}

/* ===== 内容区域 ===== */
.cyber-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0 40rpx;
  position: relative;
  z-index: 1;
}

/* ===== 登录面板 ===== */
.cyber-panel {
  width: 100%;
  background-color: rgba(10, 10, 20, 0.7);
  border: 1px solid #0ff;
  box-shadow: 0 0 20px rgba(0, 255, 255, 0.3);
  margin-bottom: 40rpx;
  position: relative;
  backdrop-filter: blur(10px);
  overflow: hidden;
}

.panel-glitch {
  animation: panel-glitch 0.2s;
}

@keyframes panel-glitch {
  0% {
    transform: translate(0);
    filter: hue-rotate(0);
  }
  20% {
    transform: translate(-5px, 5px);
    filter: hue-rotate(90deg);
  }
  40% {
    transform: translate(5px, -5px);
    filter: hue-rotate(180deg);
  }
  60% {
    transform: translate(-5px, -5px);
    filter: hue-rotate(270deg);
  }
  80% {
    transform: translate(5px, 5px);
    filter: hue-rotate(360deg);
  }
  100% {
    transform: translate(0);
    filter: hue-rotate(0);
  }
}

.hologram-effect {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, rgba(0, 255, 255, 0.05) 0%, transparent 100%);
  pointer-events: none;
  z-index: 1;
}

.panel-header {
  padding: 30rpx;
  border-bottom: 1px solid #0ff;
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.panel-title {
  display: flex;
  align-items: center;
  font-size: 32rpx;
  color: #0ff;
  text-transform: uppercase;
  letter-spacing: 2px;
}

.panel-controls {
  display: flex;
}

.control-dot {
  width: 16rpx;
  height: 16rpx;
  border-radius: 50%;
  margin-left: 10rpx;
}

.control-dot:nth-child(1) {
  background-color: #f00;
}

.control-dot:nth-child(2) {
  background-color: #ff0;
}

.control-dot:nth-child(3) {
  background-color: #0f0;
}

.title-icon {
  margin: 0 10rpx;
  color: #f0f;
}

.corner {
  position: absolute;
  width: 20rpx;
  height: 20rpx;
  border-color: #0ff;
}

.top-left {
  top: -1px;
  left: -1px;
  border-top: 2px solid;
  border-left: 2px solid;
}

.top-right {
  top: -1px;
  right: -1px;
  border-top: 2px solid;
  border-right: 2px solid;
}

.bottom-left {
  bottom: -1px;
  left: -1px;
  border-bottom: 2px solid;
  border-left: 2px solid;
}

.bottom-right {
  bottom: -1px;
  right: -1px;
  border-bottom: 2px solid;
  border-right: 2px solid;
}

/* ===== 标签页 ===== */
.login-tabs {
  display: flex;
  justify-content: space-around;
  padding: 20rpx 0;
  border-bottom: 1px solid rgba(0, 255, 255, 0.2);
  position: relative;
  z-index: 2;
}

.tab-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 20rpx 0;
  position: relative;
  transition: all 0.3s ease;
  z-index: 2;
}

.tab-icon {
  width: 40rpx;
  height: 40rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 10rpx;
}

.icon-text {
  font-size: 24rpx;
  color: #0ff;
}

.tab-item text {
  font-size: 26rpx;
  color: #666;
  transition: color 0.3s ease;
}

.tab-item.active text {
  color: #0ff;
}

.tab-highlight {
  position: absolute;
  bottom: -1px;
  left: 25%;
  width: 50%;
  height: 2px;
  background-color: #0ff;
  box-shadow: 0 0 10px rgba(0, 255, 255, 0.8);
}

/* ===== 表单区域 ===== */
.login-form {
  padding: 40rpx 30rpx;
  position: relative;
  z-index: 2;
}

.form-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 30rpx;
}

.form-title {
  font-size: 28rpx;
  color: #0ff;
}

.security-level {
  display: flex;
  align-items: center;
  font-size: 24rpx;
  color: #666;
}

.level-indicator {
  display: flex;
  margin-left: 10rpx;
}

.level-dot {
  width: 10rpx;
  height: 10rpx;
  border-radius: 50%;
  background-color: #333;
  margin: 0 5rpx;
}

.level-dot.active {
  background-color: #0f0;
  box-shadow: 0 0 5px rgba(0, 255, 0, 0.8);
}

.cyber-input-group {
  position: relative;
  margin-bottom: 50rpx;
}

.input-label {
  position: absolute;
  top: -30rpx;
  left: 0;
  font-size: 22rpx;
  color: #666;
}

.input-icon {
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
}

.icon-symbol {
  font-size: 24rpx;
  color: #0ff;
}

.cyber-input-group input {
  width: 100%;
  background-color: transparent;
  border: none;
  color: #fff;
  font-size: 28rpx;
  padding: 20rpx 0 20rpx 50rpx;
  font-family: 'Courier New', monospace;
}

.input-line {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 2px;
  background-color: #333;
  transition: all 0.3s ease;
}

.cyber-input-group.input-focus .input-line {
  background-color: #0ff;
  box-shadow: 0 0 10px rgba(0, 255, 255, 0.5);
  height: 2px;
}

.cyber-input-group.input-error .input-line {
  background-color: #f00;
  box-shadow: 0 0 10px rgba(255, 0, 0, 0.5);
}

.cyber-input-group.input-valid .input-line {
  background-color: #0f0;
  box-shadow: 0 0 10px rgba(0, 255, 0, 0.5);
}

.input-toggle {
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
}

.input-status {
  position: absolute;
  right: 30rpx;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
}

.status-symbol {
  font-size: 24rpx;
}

.status-symbol.success {
  color: #0f0;
}

.status-symbol.error {
  color: #f00;
}

.error-message {
  position: absolute;
  bottom: -30rpx;
  left: 0;
  font-size: 24rpx;
  color: #f00;
}

/* ===== 表单选项 ===== */
.form-options {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 40rpx;
}

.remember-option {
  display: flex;
  align-items: center;
  font-size: 24rpx;
  color: #999;
}

.cyber-checkbox {
  width: 24rpx;
  height: 24rpx;
  border: 1px solid #0ff;
  margin-right: 10rpx;
  position: relative;
  cursor: pointer;
}

.checkbox-inner {
  position: absolute;
  top: 4rpx;
  left: 4rpx;
  right: 4rpx;
  bottom: 4rpx;
  background-color: #0ff;
  box-shadow: 0 0 5px rgba(0, 255, 255, 0.8);
}

.forgot-link {
  font-size: 24rpx;
  color: #0ff;
  text-decoration: none;
}

/* ===== 按钮 ===== */
.cyber-button {
  position: relative;
  width: 100%;
  background-color: transparent;
  border: none;
  color: #0ff;
  font-size: 30rpx;
  height: 90rpx;
  line-height: 90rpx;
  text-transform: uppercase;
  letter-spacing: 2px;
  overflow: hidden;
  transition: all 0.3s ease;
  margin-top: 20rpx;
  font-family: 'Courier New', monospace;
}

.button-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 255, 255, 0.1);
  z-index: -1;
}

.button-border {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 1px solid #0ff;
  box-sizing: border-box;
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%);
}

.button-glitch {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(45deg, transparent 65%, rgba(0, 255, 255, 0.8) 70%, transparent 75%);
  background-size: 200% 200%;
  animation: glitch-animation 3s infinite linear;
  opacity: 0;
  z-index: 0;
}

.cyber-button:hover .button-glitch {
  opacity: 1;
}

@keyframes glitch-animation {
  0% {
    background-position: 200% 0;
  }
  100% {
    background-position: -200% 0;
  }
}

.cyber-button:hover {
  background-color: rgba(0, 255, 255, 0.1);
  box-shadow: 0 0 20px rgba(0, 255, 255, 0.4);
}

.button-loading {
  background-color: rgba(0, 255, 255, 0.1);
}

.loading-spinner {
  width: 40rpx;
  height: 40rpx;
  border: 3px solid rgba(0, 255, 255, 0.1);
  border-top-color: #0ff;
  border-radius: 50%;
  animation: spin 1s infinite linear;
  margin: 0 auto;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

/* ===== 验证码按钮 ===== */
.code-button {
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  background-color: transparent;
  color: #0ff;
  padding: 10rpx 20rpx;
  font-size: 24rpx;
  z-index: 2;
  position: relative;
}

.code-button.disabled {
  color: #666;
  border-color: #333;
}

/* ===== 二维码区域 ===== */
.qrcode-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 40rpx 0;
  position: relative;
  z-index: 2;
}

.qrcode-frame {
  position: relative;
  width: 300rpx;
  height: 300rpx;
  padding: 20rpx;
  background-color: rgba(0, 0, 0, 0.5);
  margin-bottom: 30rpx;
}

.qrcode-corner {
  position: absolute;
  width: 30rpx;
  height: 30rpx;
  border-color: #0ff;
}

.qrcode-corner.tl {
  top: 0;
  left: 0;
  border-top: 2px solid;
  border-left: 2px solid;
}

.qrcode-corner.tr {
  top: 0;
  right: 0;
  border-top: 2px solid;
  border-right: 2px solid;
}

.qrcode-corner.bl {
  bottom: 0;
  left: 0;
  border-bottom: 2px solid;
  border-left: 2px solid;
}

.qrcode-corner.br {
  bottom: 0;
  right: 0;
  border-bottom: 2px solid;
  border-right: 2px solid;
}

.qrcode-scanner-container {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  z-index: 2;
  pointer-events: none;
}

.qrcode-scanner {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 2px solid rgba(0, 255, 255, 0.3);
  box-sizing: border-box;
}

.scan-line {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 4px;
  background-color: rgba(0, 255, 255, 0.5);
  box-shadow: 0 0 10px rgba(0, 255, 255, 0.8);
  animation: scanner 2s infinite linear;
  z-index: 3;
}

@keyframes scanner {
  0% {
    top: 0;
  }
  50% {
    top: calc(100% - 4px);
  }
  100% {
    top: 0;
  }
}

.qrcode-image {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.qr-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  grid-template-rows: repeat(5, 1fr);
  width: 80%;
  height: 80%;
  background-color: #fff;
  gap: 2px;
}

.qr-cell {
  background-color: #fff;
}

.qr-filled {
  background-color: #000;
}

.qrcode-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.8);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  z-index: 3;
}

.qrcode-overlay text {
  color: #f00;
  font-size: 28rpx;
  margin-bottom: 20rpx;
}

.refresh-button {
  background-color: transparent;
  border: none;
  color: #0ff;
  font-size: 24rpx;
  padding: 10rpx 30rpx;
  position: relative;
}

.qrcode-tip {
  font-size: 26rpx;
  color: #999;
  margin-bottom: 20rpx;
}

.qrcode-status {
  display: flex;
  align-items: center;
  font-size: 24rpx;
  color: #666;
}

.status-dot {
  width: 10rpx;
  height: 10rpx;
  border-radius: 50%;
  background-color: #0ff;
  margin-right: 10rpx;
  animation: blink 1s infinite;
}

@keyframes blink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.3; }
}

/* ===== 面板底部 ===== */
.panel-footer {
  padding: 30rpx;
  border-top: 1px solid rgba(0, 255, 255, 0.2);
  position: relative;
  z-index: 2;
}

/* ===== 社交登录 ===== */
.social-login {
  margin-top: 10rpx;
}

.divider {
  display: flex;
  align-items: center;
  margin-bottom: 30rpx;
}

.divider-line {
  flex: 1;
  height: 1px;
  background-color: rgba(0, 255, 255, 0.2);
}

.divider text {
  padding: 0 20rpx;
  font-size: 24rpx;
  color: #666;
}

.social-icons {
  display: flex;
  justify-content: space-around;
}

.social-icon {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.icon-bg {
  width: 80rpx;
  height: 80rpx;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 10rpx;
  transition: all 0.3s ease;
  border: 1px solid rgba(255, 255, 255, 0.2);
  position: relative;
  overflow: hidden;
}

.platform-icon {
  font-size: 28rpx;
  font-weight: bold;
  color: #000;
}

.icon-glow {
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: radial-gradient(circle, rgba(0, 255, 255, 0.5) 0%, transparent 70%);
  opacity: 0;
  transition: opacity 0.3s ease;
}

.icon-bg:hover .icon-glow {
  opacity: 1;
}

.social-icon text {
  font-size: 22rpx;
  color: #666;
}

.wechat {
  background-color: #0ff;
}

.alipay {
  background-color: #0ff;
}

.weibo {
  background-color: #0ff;
}

.icon-bg:hover {
  transform: scale(1.1);
  box-shadow: 0 0 15px rgba(0, 255, 255, 0.5);
}

/* ===== 注册入口 ===== */
.register-entry {
  display: flex;
  justify-content: center;
  font-size: 26rpx;
  color: #666;
  margin: 30rpx 0;
}

.register-link {
  color: #0ff;
  margin-left: 10rpx;
  position: relative;
}

.register-link::after {
  content: '';
  position: absolute;
  bottom: -4rpx;
  left: 0;
  width: 0;
  height: 1px;
  background-color: #0ff;
  transition: width 0.3s ease;
}

.register-link:hover::after {
  width: 100%;
}

/* ===== 底部信息 ===== */
.cyber-footer {
  text-align: center;
  padding: 40rpx 0;
  font-size: 24rpx;
  color: #666;
  position: relative;
}

.footer-decoration {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20rpx;
}

.deco-line {
  width: 60rpx;
  height: 1px;
  background-color: #0ff;
}

.deco-circle {
  width: 10rpx;
  height: 10rpx;
  border-radius: 50%;
  background-color: #f0f;
  margin: 0 10rpx;
  box-shadow: 0 0 5px rgba(255, 0, 255, 0.8);
}

.footer-text {
  display: inline;
}

.footer-link {
  color: #0ff;
  display: inline;
  margin: 0 5rpx;
}

.footer-version {
  margin-top: 20rpx;
  color: #0ff;
  font-family: monospace;
}

.blink {
  animation: cursor-blink 1s infinite;
}

@keyframes cursor-blink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0; }
}

/* ===== Toast消息 ===== */
.toast-container {
  position: fixed;
  top: 100rpx;
  left: 0;
  right: 0;
  display: flex;
  justify-content: center;
  z-index: 1000;
  pointer-events: none;
}

.toast-message {
  padding: 20rpx 40rpx;
  background-color: rgba(0, 0, 0, 0.8);
  border: 1px solid #0ff;
  color: #fff;
  border-radius: 8rpx;
  font-size: 28rpx;
  display: flex;
  align-items: center;
  box-shadow: 0 0 20px rgba(0, 255, 255, 0.3);
  animation: toast-in 0.3s ease;
}

.toast-success {
  border-color: #0f0;
}

.toast-error {
  border-color: #f00;
}

.toast-icon {
  margin-right: 10rpx;
  font-size: 24rpx;
}

@keyframes toast-in {
  from {
    transform: translateY(-20px);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}
</style>